<template>
  <div class="cozyTipContent profits" v-loading="loading">
    <div class="trasfStop flexc center" v-if="!trad.crossNoLink || trad.b.name !== 'EOS'">
      {{ $t('ndxStake.supportProfit1') }}
    </div>
    <div class="captionBack flexb">
      <!-- 成本价 -->
      <div  class="flex1">
        <div>
          {{ $t('ndxStake.costPrice') }}
          <el-tooltip class="item itemDark" effect="dark" placement="right">
            <div slot="content">
              <div style="width: 180px">
                {{ $t('ndxStake.profitTip') }}
              </div>
            </div>
            <i class="iconfont icon-huaban"></i>
          </el-tooltip>
        </div>
        <div class="inputDiv" v-if="isSave">
          <el-input type="number"
          @blur="handleCostPriceBlur"
          v-model="costPrice" ref="costPriceInput"
          :step="stepFormat(accountProfitVo.priceScale)" class="inputProfits">
            <span slot="suffix">{{trad.b.name}}</span>
          </el-input>
          <span class="btnColor" @click="handleProfitAction(1)">{{ $t('ndxStake.save') }}</span>
        </div>
        <div class="inputDiv" v-else>
          <span class="color333">{{accountProfitVo.costPrice}} {{trad.b.name}}</span>
          <span class="btnColor ml5" v-if="accountProfitVo.costPrice !== '--'"
          @click="handleProfitAction(0)">{{ $t('ndxStake.revise') }}</span>
        </div>
      </div>
      <!-- 最新价 -->
      <div class="flex2" >
        {{ $t('quotation.newPrice') }}
        <div class="color333">{{accountProfitVo.realTimePrice}} {{trad.b.name}}</div>
      </div>
    </div>
    <!-- <div class="inputDiv flexb" v-if="isSave">
      <el-input type="number"
      @blur="handleCostPriceBlur"
      v-model="costPrice" ref="costPriceInput"
      :step="stepFormat(accountProfitVo.priceScale)" class="inputProfits">
        <span slot="suffix">{{trad.b.name}}</span>
      </el-input>
      <span class="btnColor" @click="handleProfitAction(1)">{{ $t('ndxStake.save') }}</span>
    </div> -->
    <!-- <div class="flexb inputDiv" v-else>
      <span>{{accountProfitVo.costPrice}} {{trad.b.name}}</span>
      <span class="btnColor" v-if="accountProfitVo.costPrice !== '--'"
      @click="handleProfitAction(0)">{{ $t('ndxStake.revise') }}</span>
    </div> -->
    <!-- <div>{{accountProfitVo.realTimePrice}} {{trad.b.name}}</div> -->
    <div class="captionBack flexb">
      <div class="flex1">
        <div class="mt">{{ $t('bosChain.breakEvenPrice') }}</div>
        <div class="color333">{{accountProfitVo.balance}} {{trad.a.name}}</div>
      </div>
      <div class="flex2">
        <div class="captionBack mt">{{ $t('ndxStake.profit') }}</div>
        <div class="nodeDelay" v-if="accountProfitVo.profit > 0">+{{accountProfitVo.profit}} {{trad.b.name}}</div>
        <div class="highLatency" v-else-if="accountProfitVo.profit < 0">{{accountProfitVo.profit}} {{trad.b.name}}</div>
        <div v-else class="color333">{{accountProfitVo.profit}} {{trad.b.name}}</div>
      </div>
    </div>
    <!-- <div class="captionBack" style="margin-top: 10px;">{{ $t('bosChain.breakEvenPrice') }}</div>
    <div style="padding-top: 10px;">{{accountProfitVo.balance}} {{trad.a.name}}</div> -->
    <!-- <div class="captionBack" style="margin-top: 10px;">{{ $t('ndxStake.profit') }}</div>
    <div class="nodeDelay" style="padding-top: 10px;" v-if="accountProfitVo.profit > 0">+{{accountProfitVo.profit}} {{trad.b.name}}</div>
    <div class="highLatency" style="padding-top: 10px;" v-else-if="accountProfitVo.profit < 0">{{accountProfitVo.profit}} {{trad.b.name}}</div>
    <div style="padding-top: 10px;" v-else>{{accountProfitVo.profit}} {{trad.b.name}}</div> -->
    <div class="clearfix">
      <span class="toAllProfit fr" @click="handleToAll">{{ $t('order.all') }} ></span>
    </div>
  </div>
</template>

<script>
import { toFixed, authorized, toNonExponential } from '@/utils/validate';

export default {
  name: 'Profit', // 盈亏统计
  components: {
  },
  data() {
    return {
      loading: false,
      costPrice: '',
      isSave: false,
      accountProfitVo: {
        accountNo: '',
        balance: '--',
        chain: '',
        costPrice: '--', // 成本价
        id: '',
        priceScale: '', // 价格精度
        profit: '--', // 盈亏
        realTimePrice: '--', // 最新价
        symbol: '',
      }
    }
  },
  props: {
    trad: Object,
    showProfit: Boolean,
  },
  watch: {
    showProfit: function change(val) {
      this.isSave = false;
      if (val && (!this.trad.crossNoLink || this.trad.b.name !== 'EOS')) return;
      if (val && this.trad.crossNoLink) {
        this.handleGetProfitInfo();
        return;
      }
      this.accountProfitVo = {
        accountNo: '',
        balance: '--',
        chain: '',
        costPrice: '--', // 成本价
        id: '',
        priceScale: '', // 价格精度
        profit: '--', // 盈亏
        realTimePrice: '--', // 最新价
        symbol: '',
      }
    },
    costPrice: function change(val, oldval) {
      const v = Number(val);
      const o = Number(oldval);
      if (v < 0) {
        this.costPrice = o
      }
      if (v >= 100000000) {
        this.costPrice = o;
      }
    },
  },
  created() {
  },
  mounted() {
    this.handleGetProfitInfo();
  },
  beforeDestroy() {
  },
  methods: {
    // 获取盈亏数据
    handleGetProfitInfo() {
      this.loading = true;
      authorized(this, (code) => { // 授权
        if (code === 'error') {
          this.loading = false;
          return;
        }
        const params = {
          symbolId: this.trad.id
        }
        this.$http.get('/exchangeAccountProfit/queryAccountProfitBySymbolId', { params }).then((res) => {
          this.loading = false;
          if (res.code !== 0) {
            this.$message.error(res.msg);
            return;
          }
          this.accountProfitVo = res.accountProfitVo;
          this.costPrice = res.accountProfitVo.costPrice;
        })
      })
    },
    // 修正、保存
    handleProfitAction(action) {
      this.isSave = !this.isSave;
      if (action) { // 保存
        if (Number(this.costPrice) === Number(this.accountProfitVo.costPrice)) return;
        this.loading = true;
        const params = {
          id: this.accountProfitVo.id,
          costPrice: this.costPrice
        }
        this.$http.post('/exchangeAccountProfit/updateCostPrice', params).then((res) => {
          this.loading = false;
          if (res.code !== 0) {
            this.$message.error(res.msg);
            return;
          }
          this.accountProfitVo.costPrice = toFixed(this.costPrice, this.accountProfitVo.priceScale);
        })
        return
      }
      this.costPrice = this.accountProfitVo.costPrice;
      this.$nextTick(() => {
        this.$refs.costPriceInput.focus();
        this.$refs.costPriceInput.select();
      })
    },

    handleCostPriceBlur() {
      const val = Number(this.costPrice);
      if (val < 0) {
        this.costPrice = 0;
      }
      // if (val > 99999999) {
      //   this.costPrice = 99999999;
      // }
      this.costPrice = toNonExponential(Number(this.costPrice))
    },

    // 跳转全部盈亏统计
    handleToAll() {
      this.$router.push({
        name: 'profits'
      });
    },
    // 微调数额精度
    stepFormat(p) {
      return 1 / (10 ** p);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.nodeDelay {
  color: #67c269 !important;
}

.highLatency {
  color: #E51C23 !important;
}

.color333 {
  color: #333 !important;
}

.profits {
  /deep/ .el-input-number__decrease,
  /deep/ .el-input-number__increase {
    display: none!important
  }
  /deep/ .el-input input {
    padding-right: 5px !important;
    text-align: left !important;
  }
}

.toAllProfit {
  line-height: 20px;
  cursor: pointer;
  color: #278EDA;
}

.cozyTipContent {
  // width: 220px;
  // min-width: 220px;
  font-size: 14px;
  line-height: 25px;
  padding: 5px 50px;
  font-family: SourceHanSansSC-regular;
  color: #333;

  & > div {
    padding-left: 5px;
  }

  .captionBack {
    padding: 0 5px;
    color: #999;
    // background: #F3F3F3;
  }

  .flex1 {
    width: 50%;
    height: 65px;
  }

  .flex2 {
    width: 40%;
    height: 65px;
  }

  .inputDiv {
    .btnColor {
      min-width: 30px;
      color: #278EDA;
      cursor: pointer;
    }
  }

  .inputProfits {
    width: 140px;

    /deep/ .el-input__inner {
      padding-left: 5px;
      width: 140px;
      height: 25px;
      line-height: 25px;
      -moz-appearance: textfield;
      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
    }
  }
}
.trasfStop {
  position: absolute;
  width: 80%;
  height: 70%;
  left: 10%;
  top: 20%;
  z-index: 99;
  background: rgba(255, 255, 255, 0.9);
  font-size: 16px;
}
.theme-278EDA {
}
.theme-1B1D27 {
  .cozyTipContent {
    color: rgba(255, 255, 255, 0.6);

    // .captionBack {
    //   background-color: rgba(0, 0, 0, 0.2);
    // }
  }
  .trasfStop {
    background: rgba(33, 42, 63, 1);
  }

  .color333 {
    color: rgba(255, 255, 255, 0.8) !important;
  }
}
</style>

